<template>
  <div style="padding: 20px">
    <!-- 返回按键 -->
    <div style="display: flex; justify-content: space-between;">
      <el-button link type="primary" @click="goBack">
        <el-icon style="margin-right: 5px">
          <Back/>
        </el-icon>
        返回
      </el-button>
      <div>
        <el-button type="primary" @click="changeDetails">修改</el-button>
        <el-button style="margin-left: 10px" type="primary" @click="deleteJob">删除</el-button>
      </div>
    </div>
    <!-- 详细内容 -->
    <div>
      <div style="display: flex;">
        <h1>{{ message.jobName }}</h1>
        <h2 style="color:red;margin-left: 30px;margin-top: 5px">{{ message.salary }}</h2>
      </div>
      <div style="display:flex;margin-top: 10px">
        职业类型：
        <el-tag size="small" style="margin-top: 2px;">{{ message.jobTypeName }}</el-tag>
        <div style="margin-left: 20px;">发布时间：{{ newTime }}</div>
      </div>
      <el-divider content-position="left">职位要求</el-divider>
      <div class="require">
        <el-icon>
          <User/>
        </el-icon>
        年龄要求：
        {{ message.ageRequire }}
      </div>
      <div class="require">
        <el-icon>
          <OfficeBuilding/>
        </el-icon>
        学历要求：
        {{ message.educationRequire }}
      </div>
      <div class="require">
        <el-icon>
          <Monitor/>
        </el-icon>
        经验要求：
        {{ message.experienceRequire }}
      </div>
      <div class="require">
        <el-icon>
          <Collection/>
        </el-icon>
        技能要求：
        <el-tag v-for="skill in message.skillRequire" :key="skill" size="small" style="margin-left: 5px" type="warning">
          {{ skill }}
        </el-tag>
      </div>
      <el-divider content-position="left">职位介绍</el-divider>
      <div>{{ message.jobIntroduce }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {useRouter, useRoute} from "vue-router";
import {onMounted, ref} from "vue";
import {ElMessage, ElMessageBox} from 'element-plus'
import {recruiterApi} from "../../api/app.js";

const route = useRoute();
const message = ref({});
const newTime = ref('');

// 格式化时间
const formatTime = (time) => {
  const date = new Date(time);
  const year = date.getFullYear();
  const month = ("0" + (date.getMonth() + 1)).slice(-2);
  const day = ("0" + date.getDate()).slice(-2);
  return `${year}-${month}-${day}`;
}

onMounted(() => {
  if (route.query) {
    Object.assign(message.value, route.query);
    newTime.value = formatTime(message.value.postTime);
  }
})

const router = useRouter();
const goBack = () => {
  router.back();
}

// 修改详情
const changeDetails = () => {
  console.log("进行修改，-传query值：",message.value)
  router.push({path: '/recruiterMain/postJob', query: message.value});
}

const deleteJob = () => {
  ElMessageBox.confirm(
      '确定删除岗位吗?',
      'Warning',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        recruiterApi.deleteJobById({
          id: message.value.id
        }).then(response => {
          console.log(response);
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
          goBack() //返回上一页！！
        }).catch(error => {
          console.log(error);
          ElMessage({
            type: 'info',
            message: '删除失败',
          })
        });
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })
}
</script>

<style scoped>
.require {
  padding: 10px;
}

.el-icon {
  margin-right: 5px;
}
</style>
